<template v-title data-title="课程详情">
    <div>
        <HeadContainer></HeadContainer>
        <!-- 面包削 -->
        <div class="mianbaoxiao clearfix">
            <div class="mianbao-min">
                <a href="#" rel="nofollow">首页</a> /
                <a href="#" rel="nofollow">课程</a> / 百度百科零基础入门到精通
            </div>
        </div>
        <!-- 面包削End -->
        <!-- 列表 -->
        <div class="course-head">
            <div class="course-cover container">
                <!-- 课程缩略图 -->
                <div class="course-thum">
                    <img class="course-img-bg lazy-img" :src="course.cover" style="display: inline;"></div>
                <!-- 课程缩略图 End -->
                <div class="course-info">
                    <h1>{{course.title}}</h1>
                    <div class="course-zj-djl">
                        <span class="jishu" style="padding-right:10px;">共{{course.lessonNum}}节课</span>
                        <span class="xuexicisu">{{course.buyCount}}次购买</span>
                    </div>
                    <!-- 课程价格 -->
                    <li class="price needBuy">
                        <span class="curr-price">￥{{course.price}} </span>
                    </li>
                    <!-- 课程价格 End -->
                    <!-- 课程购买/进入学习 -->
                    <div class="yxw-list-jineuxuexi">
                        <a @click="addOrder" class="list-kc-goumai" target="_blank">立即购买</a>
                        <a href="#" class="list-kc-goumai huiyuan-mf" target="_blank"
                           style="font-size:16px;color:#fff !important;background:#ff700a !important;">VIP免费学</a>
                    </div>
                    <!-- 课程购买/进入学习 End -->
                </div>
            </div>
        </div>
        <!-- 列表 End -->
        <!-- 课程列表内容 -->
        <div class="course-head">
            <div class="course-cover-2 clearfix">
                <!-- 左边信息 -->
                <div class="course-cover-fl">
                    <div class="aui-nav-content-box">
                        <!-- TAB -->
                        <div class="aui-nav-list-box">
                            <ul>
                                <li class="aui-current"><span>课程信息</span></li>
                                <li><span>课程目录</span></li>
                            </ul>
                        </div>
                        <!-- TAB End -->
                        <!-- 切换 -->
                        <div class="aui-nav-list-tab">
                            <!-- 课程简介 -->
                            <div class="aui-nav-list-item" style="display:block">
                                <div class="yxw-kc-jianjie">
                                    <p>
                                        <img alt="" src="../assets/images/1-200111101400639.jpg">
                                    </p>
                                    <p>
                                        <img alt="" src="../assets/images/1-200111101411501.jpg">
                                    </p>
                                </div>
                            </div>
                            <!-- 课程简介 End -->
                            <!-- 课程目录 -->
                            <div class="aui-nav-list-item" style="display: none;">
                                <div class="task-task-list">
                                    <a href="javascript:;" class="task-task-item needBuy_kelist" rank="500"
                                       target="_blank">
                                        <p class="task-tt" style="overflow:hidden;">
                      <span class="task-tt-text fl">
                        <span class="yxw-ks">课时1</span>
                        我是课程的付费标题01
                      </span>
                                            <span class="yxw-kc-s needBuy fr"></span>
                                        </p>
                                    </a>
                                </div>
                                <div class="task-task-list">
                                    <a href="javascript:;" class="task-task-item needBuy_kelist" rank="500"
                                       target="_blank">
                                        <p class="task-tt" style="overflow:hidden;">
                      <span class="task-tt-text fl">
                        <span class="yxw-ks">课时2</span>
                        我是课程的付费标题02
                      </span>
                                            <span class="fr">
                           <em class="keshikan">免费</em>
                      </span>
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <!-- 课程目录 End -->
                        </div>
                        <!-- 切换 End -->
                    </div>
                </div>
                <!-- 左边信息 End -->
                <!-- 右边信息 -->
                <div class="course-cover-fr">
                    <h3>精选好课</h3>
                    <ul>
                        <li>
                            <a href="" class="link" rel="nofollow">
                                <img class="course-img-bg lazy-img" src="../assets/images/1-20012G4563K54.jpg"
                                     style="display: block;">
                            </a>
                            <p><a href="" class="title">如何用6系统创建一个符合SEO的网站</a></p><span>O集全</span>
                        </li>
                        <li>
                            <a href="" class="link" rel="nofollow">
                                <img class="course-img-bg lazy-img" src="../assets/images/1-200116160922432.jpg"
                                     style="display: block;">
                            </a>
                            <p><a href="" class="title">如何用6系统创建一个符合SEO的网站</a></p><span>O集全</span>
                        </li>
                        <li>
                            <a href="" class="link" rel="nofollow">
                                <img class="course-img-bg lazy-img" src="../assets/images/1-200116160A5261.jpg"
                                     style="display: block;">
                            </a>
                            <p><a href="" class="title">如何用6系统创建一个符合SEO的网站</a></p><span>O集全</span>
                        </li>
                    </ul>
                </div>
                <!-- 右边信息 End -->
            </div>
        </div>
        <!-- 课程列表内容 End -->
        <FooterContainer></FooterContainer>
    </div>
</template>


<script>

    import HeadContainer from '@/views/HeadContainer'
    import FooterContainer from '@/views/FooterContainer'
    import course from "@/api/course";
    import order from "@/api/order";

    export default {
        name: "CourseDetail",
        components: {HeadContainer, FooterContainer},
        data() {
            return {
                course: {},
                courseId: ""
            }
        },
        methods: {

            //查询 course 详情
            findCourse() {
                course.findCourseDetailById(this.courseId).then(resp => {
                    this.course = resp.data;
                });
            },

            addOrder() {
                //判断当前是否登陆，如果没有登陆跳转到登陆页面，并且把当前页面的路径当成参数传递给登陆页面
                //登陆成功还要跳转回来
                const token = localStorage.getItem("token");
                if (!token) {
                    //没有登陆
                    this.$router.push({
                        /*路由的name属性值，就是不要写/ */
                        name: 'login',
                        params: {
                            //传递的一个参数, 传递当前页面的路径
                            /**
                             * this.$router.currentRoute.fullPath: 获取当前页面的全路径 /courseDetail/6978895115431579648
                             */
                            redirect: this.$router.currentRoute.fullPath
                        }
                    })
                } else {
                    //向后台发请求添加一个订单
                    order.addOrderApi(this.course.id).then(data => {
                        /**
                         * 添加订单成功，跳转到订单详情页面
                         */
                        this.$router.push({path: '/order/' + data.data.id})

                    }).catch(data => {
                        console.log(data)
                    })
                }
            }
        },
        created() {

            //拿到 courseId
            /**
             * this.$route   this.$route: 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，
             *               可以获取对应的 name, path, meta, params, query 等属性
             * this.$router  this.$router(路由实例) : 是VueRouter的实例.包含了很多属性和对象
             *
             */
            if (this.$route.params.id) {  //判断
                this.courseId = this.$route.params.id;

                this.findCourse();
            }


        }
    }
</script>

<style src="@/assets/css/course_detail.css" scoped></style>
<style src="@/assets/css/v2_index.css" scoped></style>